<template>
  <view class="my-login-wrapper">
    <view class="my-login">
      <uni-icons type="contact-filled" color="#afafaf" size="100" />
      <button type="primary" open-type="getUserInfo" @click="getUserProfile">
        一键登录
      </button>
      <view> 登录后尽享更多权益 </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "my-login",
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState("m_user", ["redirectinfo"]),
  },
  methods: {
    ...mapMutations("m_user", [
      "updateUserInfo",
      "updateToken",
      "updateRedirectInfo",
    ]),
    async getUserProfile() {
      // 调用getUserProfile 获取登录信息 以及数据请求需要的参数
      const [err, res] = await uni.getUserProfile({ desc: "登录" });

      if (err !== null && err.errMsg === "getUserProfile:fail auth deny")
        return uni.$showMessage("您取消了登录授权");

      // 将用户信息本地存储化
      this.updateUserInfo(res.userInfo);

      // 获取登录成功后的token
      this.getToken(res);
    },
    async getToken(info) {
      // 调用登录接口获得code
      const [err, res] = await uni.login().catch((err) => err);
      if (res.errMsg !== "login:ok") uni.$showMessage("登录失败");

      const query = {
        code: res.code,
        encryptedData: info.encryptedData,
        iv: info.iv,
        rawData: info.rawData,
        signature: info.signature,
      };

      // 发送请求获取token
      const data = await uni.$http.post("/api/public/v1/users/wxlogin", query);

      if (data.statusCode !== 200) uni.$showMessage("登录失败");

      const token =
        "BearereyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo";
      this.updateToken(token);

      this.navigatorBack()
    },
    // 路由跳转回去
    navigatorBack(){
      if(this.redirectinfo && this.redirectinfo.openType === 'switchTab'){
        uni.switchTab({
          url: this.redirectinfo.from,
          complete:()=>{
            this.updateRedirectInfo(null)
          },
        })
      }
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.my-login-wrapper {
  height: 100%;
  background-color: white;
}
.my-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  height: 750rpx;
  overflow: hidden;
  position: relative;

  &::after {
    content: "";
    display: block;
    background-color: white;
    border-radius: 100%;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 750rpx;
    transform: translateY(-50%);
  }

  button {
    background-color: #c00000;
    border-radius: 100px;
    width: 90%;
    font-size: 16px;
  }
  view {
    font-size: 12px;
    color: grey;
    margin-top: 10px;
  }
}
</style>